<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期(旧)</title>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>

    <div id="test"></div>
    <div id="car"></div>
    <script type="text/babel">
       
        class Demo extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    sum :0
                },
                this.count = this.count.bind(this)
            }
            // state = {
            //     sum:0
            // }
            count(){
                let sum = this.state.sum
                sum++
                this.setState({
                    sum
                })
            }
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            update = ()=>{
                this.forceUpdate()
            }
            // 将要挂载前
            componentWillMount(){

            }
            // 挂载后
            componentDidMount(){

            }
            // 将要卸载前
            componentWillUnmount(){
                console.log('将要卸载前');
            }
            // 控制组件更新的阀门 返回 true or false
            shouldComponentUpdate(){
                console.log('数据更新',);
                return true
            }
            // 组件将要更新的钩子函数
            componentWillUpdate(){

            }
            //  组件更新完毕的钩子函数
            componentDidUpdate(){

            }
            render(){
                const {sum} = this.state
                return(
                    <div>
                        <h2>当前求和为 {sum}</h2>
                        <button onClick={this.count}> +1 </button>
                        <button onClick={this.death}>卸载</button>
                        <button onClick={this.update}>强制更新</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />,document.getElementById('test'))
        

        class Father extends React.Component{
            state = { car :'奔驰'}
            changeCar=()=>{
                this.setState({car:'奥迪'})
            }
            render(){
                return(
                    <div>
                        我是父组件
                        <button onClick={this.changeCar}>换车</button>    
                        <Son car={this.state.car}/>
                    </div>
                )
            }
        }
        class Son extends React.Component{
            componentWillReceiveProps(){
                // 此处有一个坑 第一遍传的值 不会调用 
                console.log('父组件render 子组件重新',);
            }
            render(){
                return(
                    <div>
                        儿子说:我爸开的是{this.props.car}
                    </div>
                )
            }
        }
        ReactDOM.render(<Father/>,document.getElementById('car'))




    </script>


    
</body>
</html>